<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://unpkg.com/vue"></script>
<body>
	<div id="app">
	  <p>{{ message }}</p>
	</div>

	<div id="app-2">
		<span v-bind:title="message">
    	鼠标悬停几秒钟查看此处动态绑定的提示信息！
  		</span>
	</div>

	<div id="app-3">
		<p v-if="seen">现在你看到我了</p>
	</div>

	<div id="app-4">
	  <ol>
	    <li v-for="todo in todos">
	      {{ todo.text }}
	    </li>
	  </ol>
	</div>

	<div id="app-5">
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
	</div>

	<div id="app-6">
		<p>{{message}}</p>
		<input v-model="message">
	</div>

</body>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello good boy!'
  }
})

// 元素绑定类似于css的选择器

var app2 = new Vue({
	el: "#app-2",
	data: {
		message: '页面加载于 ' + new Date()
	}
})

// v- 表示vue的指令

var app3 = new Vue({
	el: '#app-3',
	data: {
		seen: true
	}
})

// 判断语句，js控制属性自动获得dom更新

var app4 = new Vue({
	el: "#app-4",
	data: {
		todos: [
			{ text: "云纹"},
			{ text: "数学"}
		]
	}
})

var app5 = new Vue({
	el:"#app-5",
	data: {
		message: "hi good boy!"
	},
	methods : {
		reverseMessage: function(){
			this.message = this.message.split(' ').reverse().join()
		}
	}
})

var app6 = new Vue({
	el: "#app-6",
	data: {
		message: "youyou youyou"
	}
})


</script>
</html>
